<!-- login -->
<template>
  <dv-border-box-10 class="contain">
    <a-row class='login'>
      <a-col
        :xs="20"
        :sm="8"
        :md="8"
        :lg="6"
        :xl="6"
        :xxl="4"
      >
        <div class="loginCard">
          <div class="loginContent">
            <a-button
              type="primary"
              icon="thunderbolt"
              style="cursor: pointer;margin:5px auto 5px"
              @click="showUpload = !showUpload"
            >
              {{showUpload?'快速注册':'返回'}}
            </a-button>
            <img
              v-show="showUpload"
              class="logo"
              src="../../../public/logo.png"
              alt="logo"
            >
            <a-upload
              v-show="!showUpload"
              name="avatar"
              list-type="picture-card"
              class="avatar-uploader uploader"
              :show-upload-list="false"
              :customRequest="customRequest"
              :before-upload="beforeUpload"
              @change="handleChange"
            >
              <img
                class="avatar"
                v-if="imageUrl"
                :src="imageUrl"
                alt="avatar"
              />
              <div v-else>
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">
                  Upload
                </div>
              </div>
            </a-upload>
            <a-form-model
              :model="formInline"
              @submit="handleSubmit"
              @submit.native.prevent
            >
              <a-form-model-item>
                <a-input
                  v-model="formInline.user"
                  placeholder="Username"
                >
                  <a-icon
                    slot="prefix"
                    type="user"
                    style="color:rgba(0,0,0,.25)"
                  />
                </a-input>
              </a-form-model-item>
              <a-form-model-item>
                <a-input
                  v-model="formInline.password"
                  type="password"
                  placeholder="Password"
                >
                  <a-icon
                    slot="prefix"
                    type="lock"
                    style="color:rgba(0,0,0,.25)"
                  />
                </a-input>
              </a-form-model-item>
              <a-form-model-item v-show="!showUpload">
                <a-input
                  v-model="formInline.rePassword"
                  type="password"
                  placeholder="rePassword"
                >
                  <a-icon
                    slot="prefix"
                    type="lock"
                    style="color:rgba(0,0,0,.25)"
                  />
                </a-input>
              </a-form-model-item>
              <a-form-model-item>
                <a-button
                  style="width:45%"
                  type="primary"
                  html-type="submit"
                  :disabled="!showUpload || formInline.user === '' || formInline.password === ''"
                >
                  Log in
                </a-button>
                <a-button
                  style="width:45%;margin-left:10%"
                  type="primary"
                  @click="loginUpSubmit"
                  :disabled="showUpload || formInline.user === '' || formInline.password === ''"
                >
                  Log up
                </a-button>
              </a-form-model-item>
            </a-form-model>
            <div class="oauth">
              <a href="https://github.com/login/oauth/authorize?
  client_id=fbf62ccd8643da3d4e93&
  redirect_uri=http://www.keledd.cn:3000/oauth/redirect">
                <a-icon type="github" />
              </a>
              <a href="https://api.weibo.com/oauth2/authorize?client_id=3877246602&redirect_uri=http://www.keledd.cn:3000/oauth/weibo">
                <a-icon type="weibo-square" />
              </a>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <div class="contain-inner">
      <dv-border-box-9></dv-border-box-9>
    </div>

  </dv-border-box-10>
</template>

<script>
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
import * as api from "@/API/require"
export default {
  components: {},
  data() {
    return {
      loading: false,
      imageUrl: '',
      showUpload: true,
      formInline: {
        user: '',
        password: '',
        rePassword: ''
      },
      formData: new FormData()
    };
  },
  computed: {},
  watch: {},
  methods: {
    handleChange(info) {
      console.log(info)
      //   if (info.file.status === 'uploading') {
      //     this.loading = true;
      //     return;
      //   }
      //   if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl => {
        this.imageUrl = imageUrl;
        this.loading = false;
      });
      //   }
    },
    beforeUpload(file) {
      console.log(file)
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPEG and PNG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
    // 登录
    handleSubmit() {
      api.login({
        name: this.formInline.user,
        password: this.formInline.password
      }).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message)
          localStorage.setItem('userInfo', JSON.stringify(res.data.userInfo))
          this.$router.push('/');
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    customRequest() {
      // this.formData = null
      // this.formData.append('avator',file.file)
    },
    // 注册
    loginUpSubmit() {
      api.signup({
        name: this.formInline.user,
        password: this.formInline.password,
        repeatpass: this.formInline.rePassword,
        avator: this.imageUrl
      }).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
  },
  created() {

  },
  mounted() {

  },
}
</script>
<style lang="less" scoped>
.contain {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  .border-box-content {
    .contain-inner {
      width: 50%;
      height: 60%;
      left: 50%;
      top: 50%;
      position: absolute;
      transform: translate(-50%, -50%);
    }
  }
}
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  //   background-image: url(../../../public/timg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: bottom;
  /deep/ .loginCard {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .loginContent {
      width: 80%;
      height: 80%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .logo {
        width: 92px;
        margin-bottom: 20px;
      }
      .uploader {
        display: flex;
        justify-content: center;
        .avatar {
          width: 100%;
        }
      }
      .oauth {
        display: flex;
        margin: 0 auto 10px;
        width: 100%;
        font-size: 1.3rem;
        justify-content: space-around;
      }
    }
  }
}
</style>